<template>
	<view class="timetable-container">

		<view class="t-item" v-for="item in currtTimetableLsit" :class="{'item-acvtive': item.month + ''+item.day == nowDay ? true : false}" :key="Math.random()" >
			<div  class='item-header' >
				<div>
					{{item.week}}
				</div>
				<div>
					{{(item.month + "").padStart(2,0)}}-{{(item.day + "").padStart(2,0)}}
				</div>
				
			</div>
			<div>
				<TimeIitem  v-for=" c in item.classList"  :classInfo="c" :key="Math.random()" ></TimeIitem>
			</div>
		</view>
	</view>
</template>

<script>
	import TimeIitem from "@/components/timetable-item.vue"
	export default {
		components:{
			TimeIitem
		},
		name:"timetable-container",
		props:{
			currtTimetableLsit:{
				type: Array
			}
		},
		data() {
			return {

				isUp:true,
				nowDay:null
			};
		}
		,
		created(){
			
			const day = new Date();
			const m = day.getMonth() + 1;
			const d = day.getDate()
			this.nowDay = m +''+ d
		}
	}
</script>

<style scoped>
.timetable-container{
	width: 100%;
	height: 100%;
	position: relative;
	display: flex; 
	background-color: #f6f6f6;
	 background-image: url('@/static/asset/nf.png'); 
	background-position: 50% 50%;
	overflow: hidden;
	background-clip: border-box;
	background-repeat: no-repeat;
	font-size: 11rpx;

}
.t-item{
	width: calc(100% / 7 );
	height: inherit;
	background-color: rgba(255, 255, 255, 0.8);

	margin: 0 2rpx ;
	display: flex;
	flex-direction: column;
}
.item-header{
	text-align: center;
	height:63rpx;
	border-bottom: 1px solid #dcdfe6 ;
	box-sizing: border-box;
	font-size: 20rpx;
	
}
.item-acvtive{
	background-color: rgba(125, 0, 0, 0.1);
}
</style>